<template>
	<div class="ui-inputnum" :style="style"  :class="[classname,size,disabledClass]">
		<input type="text" v-model="value" @keyup="keyup" class="ui-inputnum-text" :readonly="readonly" @change="change" :disabled="disabled" @input="input" :name="name"/>
		<div class="ui-inputnum-icon ui-inputnum-left font" @click="minus">&#xe6ba;</div>
		<div class="ui-inputnum-icon ui-inputnum-right font" @click="add">&#xe6b9;</div>
	</div>
</template>

<script>
	/*
	组件属性[
		data.value:value值
		style:自定义样式
		class:自定义class
		name:表单name
		disabled：是否交互 true/false
		readonly:是否只读 true/false
		size:按钮尺寸 normal(默认),small
		min:最小值
		max:最大值
		rules:用于表单验证
			[
					empty:[true/false,"提示信息"],
					int:[true/false,"提示信息"],
					min:[200,"提示信息"],
					...
				]

	]

	组件事件[
		click:选项发生改变时回调的父组件方法，callback(num[当前数字])
	]
	*/
	export default{
		props:{
			"value":{type:Number,default:1},
			'style':{type:null,default:""},
			'classname':{type:null,default:""},
			'name':{type:null,default:""},
			'size':{type:String,default:'normal'},
			'disabled':{type:Boolean,default:false},
			'readonly':{type:Boolean,default:true},
			'min':{type:Number,default:0},
			'max':{type:Number,default:9999},
			'rules':{type:Array,default:[]}
		},
		data(){
			return {
				uiType:"ui-btn",
				disabledClass:this.disabled?"disabled":"",
			}
		},
		computed:{
			isread(){
				if(this.readonly || this.type=="date"){
					return 'readonly';
				}
				return "";
			}
		},
		methods:{			
			change(){
				if(!this.disabled){
                    this.$emit('change',this.value);
				}
			},
			add(){
				this.value+=1;
				if(this.max!=null && this.max<this.value){
					this.value=this.max
				}
				this.change();
			},
			minus(){
				this.value-=1;
				if(this.min!=null && this.min>this.value){
					this.value=this.min;
				}
				this.change();
			},
			input(){
				let tmp=parseFloat(this.value);
				if(!isNaN(tmp)){
					if(this.min!=null && tmp<this.min){
						this.value=this.min;
					}else if(this.max!=null && tmp>this.max){
						this.value=this.max;
					}else{
						this.value=tmp;
					}
				}else{
					this.value=this.min!=null?this.min:(this.max!=null?this.max:1);
				}
				this.change();
			},
			keyup(){
				let key=event.keyCode;
				if(key==38){
					this.value+=1;
				}else if(key==40){
					this.value-=1;
				}
			}
		}
	}
</script>
